<template>
  <div class="range-box">
    <template v-if="type === 'input_slide'">
      <el-input-number
        v-model="curRangeSize"
        class="slider-number"
        :min="min"
        :max="max"
        :controls="false"
        size="default"
        :step="step"
        :precision="precision"
      ></el-input-number>
      <el-button
        :link="true"
        type="primary"
        class="slider-number-left"
        @click="handleRangeSize('reduce')"
      >
        <el-icon><Remove /></el-icon>
      </el-button>
      <el-slider
        v-model="curRangeSize"
        :min="min"
        :max="max"
      ></el-slider>
      <el-button
        :link="true"
        type="primary"
        class="slider-number-right"
        @click="handleRangeSize('add')"
      >
        <el-icon><CirclePlus /></el-icon>
      </el-button>
    </template>
    <template v-if="type === 'input'">
      <el-input-number
        v-model="curRangeSize"
        class="input-number"
        :disabled="disabled"
        :min="min"
        :max="max"
        size="default"
        :step="step"
        :stepStrictly="stepStrictly"
        :controls-position="controlsPosition"
        :precision="precision"
      ></el-input-number>
      <span
        v-if="tip"
        class="fix-flex"
      >&nbsp;</span>
      <el-tooltip
        v-if="tip"
        class="item"
        :effect="xvueTheme"
        :content="tip"
        placement="top-start"
      >
        <el-button
          :link="true"
          type="primary"
          :style="{ marginLeft: '5px' }"
        >
          <el-icon><InfoFilled /></el-icon>
        </el-button>
      </el-tooltip>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'input_slide', // input_slide: 输入框+滑动条， input: 输入框
    },
    value: {
      type: Number,
      default: undefined,
    },
    min: {
      type: Number,
      default: -100000000,
    },
    max: {
      type: Number,
      default: 100000000,
    },
    tip: {
      type: String,
      default: '',
    },
    step: {
      type: Number,
      default: 1,
    },

    // 数值输入框是否只能输入 step 的倍数
    stepStrictly: {
      type: Boolean,
      default: false,
    },
    controlsPosition: {
      type: String,
      default: '', // right, left
    },
    precision: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:value'],
  data() {
    return {
      curRangeSize: this.value,
      xvueTheme: window._adoPremise.uc.theme,
    };
  },
  watch: {
    value(newVal, oldVal) {
      this.curRangeSize = newVal;
    },
    curRangeSize(newVal, oldVal) {
      this.$emit('update:value', newVal);
    },
  },
  methods: {
    handleRangeSize(type) {
      if (type === 'add') {
        this.curRangeSize++;
      } else {
        this.curRangeSize--;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.range-box {
  display: flex;
  align-items: center;
  width: 100%;
  :deep(.slider-number) {
    width: 28px;
    margin-right: 5px;
    .el-input__wrapper{
      padding-left: 0;
      padding-right: 0;
    }
  }
  .slider-number-left {
    margin-right: 10px;
  }
  .slider-number-right {
    margin-left: 10px;
  }
  .el-slider {
    width: 110px;
  }
  .input-number {
    width: 100%;
  }
  :deep(.el-input-number.is-controls-right) {
    .el-input__wrapper{
      padding-left: 0;
      padding-right: 27px;
      .el-input__inner {
        padding-left: 0px;
        padding-right: 0px;
      }
    }
  }
}
</style>
<style lang="less">
.vis-el-tooltip-dark {
  background-color: #0eb4c2 !important;
  color: #fff !important;
  border-color: #0eb4c2 !important;

  .popper__arrow {
    border-top-color: #0eb4c2 !important;

    &::after {
      border-top-color: #0eb4c2 !important;
    }
  }
}
</style>
